<template>
  <div class="notifications-settings">
    <van-nav-bar
      title="消息通知"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="settings-section">
      <van-cell-group>
        <van-cell center title="系统通知">
          <template #right-icon>
            <van-switch v-model="settings.systemNotify" size="24" @change="onSettingChange('systemNotify')" />
          </template>
        </van-cell>
        <van-cell center title="课程更新通知">
          <template #right-icon>
            <van-switch v-model="settings.courseNotify" size="24" @change="onSettingChange('courseNotify')" />
          </template>
        </van-cell>
        <van-cell center title="评论回复通知">
          <template #right-icon>
            <van-switch v-model="settings.commentNotify" size="24" @change="onSettingChange('commentNotify')" />
          </template>
        </van-cell>
        <van-cell center title="点赞通知">
          <template #right-icon>
            <van-switch v-model="settings.likeNotify" size="24" @change="onSettingChange('likeNotify')" />
          </template>
        </van-cell>
        <van-cell center title="推广通知">
          <template #right-icon>
            <van-switch v-model="settings.promotionNotify" size="24" @change="onSettingChange('promotionNotify')" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'

const router = useRouter()
const settings = ref({
  systemNotify: true,
  courseNotify: true,
  commentNotify: true,
  likeNotify: true,
  promotionNotify: false
})

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 设置变更处理
const onSettingChange = async (key) => {
  try {
    // TODO: 调用接口更新设置
    // await updateNotificationSetting({ key, value: settings.value[key] })
    showSuccessToast('设置已更新')
  } catch (error) {
    console.error('更新设置失败:', error)
    showToast('更新设置失败，请重试')
    // 回滚设置
    settings.value[key] = !settings.value[key]
  }
}
</script>

<style lang="scss" scoped>
.notifications-settings {
  min-height: 100vh;
  background-color: #f7f8fa;

  .settings-section {
    margin-top: 12px;
  }
}
</style>
